<template>
  <view :style="{ height: productAttckViewH + 'px' }"
        style="position: fixed;display: flex;flex-direction: column;width: 100%;">
    <view class="detail-swiper">
      <swiper
              class="product-swiper"
              vertical
              :circular="false"
              :autoplay="false"
              :duration="300"
              :current="swiperCurrent"
              @change="videoChange">
        <swiper-item v-for="(item, index) in swiperData" :key="index">
          <view class="swiper-video-item h-full">
            <view class="h-full" v-if="item.video_link" style="flex: 1;position: absolute;left: 0;top: 0;width: 100%;">
              <video
                  :id="item.id + 'k' + index"
                  :muted="false"
                  :autoplay="index === swiperCurrent"
                  :loop="true"
                  :controls="false"
                  :http-cache="true"
                  :page-gesture="false"
                  :show-fullscreen-btn="false"
                  :show-loading="false"
                  :show-center-play-btn="false"
                  :enable-progress-gesture="false"
                  :src="item.video_link"
                  object-fit="contain"
                  @ended="ended"
                  @click="tapVideoHover($event)"
                  class="w-full h-full"
              ></video>
              <!-- #ifdef H5 -->
              <view class="abs-center w-full h-full flex-center" @tap="playVideo" v-if="!isPlay && Auth.isWeixin()">
                <image src="@/static/images/stop.png" mode="" class="w-160 h-160"></image>
              </view>
              <!-- #endif -->
            </view>
            <view class="h-full flex-y-center" v-else>
              <swiper
                  class="w-full h-full"
                  :autoplay="index === swiperCurrent"
                  :current="imgCurrent"
                  :interval="4000"
                  :duration="500"
                  :vertical="false"
                  @change="photoChange">
                <swiper-item v-for="(photo, i) in item.slider_image" :key="i">
                  <view class="h-full flex-y-center">
                    <image :src="photo" mode="widthFix" class="w-full"></image>
                  </view>
                </swiper-item>
              </swiper>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="fixed-desc w-full text--w111-fff" :class="{'hide-tab':showFooter,'full-tab':fullVideo}" @click="goDetail(currentData.id)">
      <view class="w-full flex-center pb-32 mt-24 relative z-80"
            style="left: 10rpx;"
            v-if="imgList.length && imgList.length > 1 && 1 != currentData.video_open">
        <block v-for="(_, index) in imgList" :key="index">
          <view class="dot_item h-4 jg-16 rd-2rpx" :style="{ 'background-color': imgCurrent >= index ? '#fff' : 'rgba(255,255,255,0.4)', width: dotWidth + 'rpx' }"></view>
        </block>
      </view>
      <view id="productinfo" class="rd-b-24rpx bg--w111-fff p-24">
        <view class="flex-between-center">
          <view class="flex-y-center">
            <baseMoney :money="currentData.price" symbolSize="36" integerSize="52" decimalSize="36"
                       weight></baseMoney>
            <!-- <view class="svip-label ml-8" v-if="currentData.vip_price && currentData.vip_price > 0">
              <text class="text">SVIP</text>
              <text class="px-8 Regular">¥{{currentData.vip_price}}</text>
            </view> -->
          </view>
          <view class="fs-24 lh-34rpx text--w111-999">{{currentData.sales}}人都在买</view>
        </view>
        <view class="flex-between-center mt-24">
          <view class="w-422 lh-40rpx fs-28 text--w111-333 fw-500 line2">
            <text v-if="currentData.brand_name" class="brand-tag">{{ currentData.brand_name }}</text>{{currentData.store_name}}
          </view>
          <view class="flex" v-if="currentData.cart_button">
            <view class="w-112 h-64 rd-r-32rpx bg-color flex-center text--w111-fff fs-24">去购买</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
let sysHeight = uni.getSystemInfoSync().statusBarHeight;
import emptyPage from '@/components/emptyPage.vue';
import {
  communityBrowseApi,
} from "@/api/community.js"
import { mapGetters } from 'vuex';
// #ifdef H5
import Auth from '@/libs/wechat.js';
// #endif
export default {
  name: 'detailProductSwiperVideo',
  props: {
    swiperData: {
      type: Array,
      default: () => []
    },
    showFooter:{
      type: Boolean,
      default: true
    },
    fullVideo:{
      type: Boolean,
      default: false
    }
  },

  data() {
    return {
      sysHeight,
      swiperCurrent: 0,
      imgList: [],
      imgCurrent: 0,
      isPlay: false,
      showProDrawer:false,
      productList:[],
      showBubble:false,
      showReply:false,
      community_id:'',
      comment_num:'',
      currentData: {},
      showDelete:false,
      isExpanded:false,
      // #ifdef H5
      Auth,
      // #endif
      productAttckViewH: 0,
    };
  },
  components:{
    emptyPage,
  },
  watch:{
    swiperData:{
      handler(nVal){
        this.currentData = nVal[this.swiperCurrent];
        if(this.currentData && this.currentData.slider_image && this.currentData.slider_image.length){
          this.imgList = this.currentData.slider_image;
        }
        //初始化记录第一个浏览的内容
        if(this.currentData){
          //this.lookVideo();
        }
      },
      immediate:true
    },
  },
  mounted() {
    this.updateFrameView();
  },
  computed: {
    ...mapGetters(['isLogin','uid']),
    dotWidth() {
      let windowWidth = uni.getSystemInfoSync().windowWidth;
      return (windowWidth * 2 - (20 + (this.imgList.length) * 12)) / this.imgList.length;
    },
    showMore(){
      if(this.currentData && this.currentData.relation_id == this.uid && this.isLogin){
        return true
      }else {
        return false
      }
    }
  },
  methods: {
    goProductDetail() {
      console.log('Think',this.currentData)
      this.$emit('detailClick',this.currentData);
    },
    goCartDuo(item) {
      this.$emit('goCartDuoClick',item);
    },
    goCartDan(item, index) {
      this.$emit('goCartDanClick',item,index);
    },
    isString(value) {
      return typeof value === 'string';
    },
    backPage(){
      let pages = getCurrentPages(); // 获取当前打开过的页面路由数，
      if (pages.length > 1) {
        uni.navigateBack()
      } else {
        uni.switchTab({
          url: '/pages/index/index'
        });
      }
    },
    playVideo(){
      uni.createVideoContext(this.swiperData[this.swiperCurrent].id + 'k' + this.swiperCurrent, this).play();
      this.isPlay = true;
    },
    tapVideoHover(e) {
      if(this.isPlay){
        uni.createVideoContext(this.swiperData[this.swiperCurrent].id + 'k' + this.swiperCurrent, this).pause();
        this.isPlay = false;
      }else{
        uni.createVideoContext(this.swiperData[this.swiperCurrent].id + 'k' + this.swiperCurrent, this).play();
        this.isPlay = true;
      }

    },
    ended() {},
    videoChange(event) {
      const newIndex = event.detail.current;
      // 暂停当前视频
      if (this.swiperCurrent !== newIndex) {
        uni.createVideoContext(this.swiperData[this.swiperCurrent].id + 'k' + this.swiperCurrent, this).pause();
        this.swiperCurrent = newIndex;
        // 播放新视频
        uni.createVideoContext(this.swiperData[this.swiperCurrent].id + 'k' + this.swiperCurrent, this).play();
        this.currentData = this.swiperData[this.swiperCurrent];
        this.showBubble = false;
        this.$emit('onSwiper',this.swiperCurrent);
      }
      if(this.swiperData[this.swiperCurrent].slider_image.length){
        this.imgList = this.swiperData[this.swiperCurrent].slider_image;

      }else{
        this.imgList = [];
      }
      this.imgCurrent = 0;
      //this.lookVideo();
      let url = this.currentData.slider_image[this.swiperCurrent];
      /*
      if (1 == this.currentData.video_open) {
        //?x-oss-process=video/snapshot,t_10,f_jpg
        url = this.currentData.video_link + "?x-oss-process=video/snapshot,m_fast,t_1000,f_jpg,ar_auto";
      } else {
        url = this.currentData.slider_image[this.swiperCurrent];
      }
       */
      this.$emit('onSwiperChanged',url);
    },
    lookVideo(){
      if(this.isLogin){
        communityBrowseApi(this.currentData.id).catch(err=>{
          console.error(err);
        })
      }
    },
    photoChange(e) {
      this.imgCurrent = e.detail.current;
      this.$emit('onSwiperChanged',this.currentData.slider_image[this.imgCurrent]);
    },
    goDetail(id){
      let url = `/pages/goods_details/index?id=${id}`
      this.$util.JumpPath(url);
    },
    authTo(url){
      uni.navigateTo({
        url: url
      });
    },
    updateFrameView() {
      let that = this;
      const query = uni.createSelectorQuery().in(this);
      query.select('#productinfo').boundingClientRect(data => {
        if (data) {
			// #ifdef MP
          that.productAttckViewH = data.bottom - data.height - 35;
			// #endif
			// #ifdef H5
			that.productAttckViewH = data.bottom - data.height - 77;
			// #endif
        }
      }).exec();
    }
  },
};
</script>
<style lang="scss" scoped>
/deep/ .uni-video-container {
	background-color: transparent;
}
.detail-swiper {
  width: 100%;
  height: 100%;
}
.product-swiper {
  margin-top: 80rpx;
  height: 100%;
  /*height: calc(100% - (80rpx + calc(100rpx + env(safe-area-inset-bottom) + env(safe-area-inset-top))));*/
}
.z-4000{
  z-index: 4000;
}
.avatar-box{
  border: 3rpx solid #FFFFFF;
}
.bg-transparent{
  background-color: transparent;
}
.text-line{
  text-decoration: line-through;
}
.hide-footer{
  padding-bottom: 30rpx;
}
.show-footer{
  padding-bottom: calc(30rpx + env(safe-area-inset-bottom));
}
.right-action {
  position: fixed;
  right: 20rpx;
  /* #ifdef H5 */
  bottom: 162rpx;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  bottom: 62rpx;
  /* #endif */
  width: 88rpx;
}
.action-box{
  /* #ifdef MP-WEIXIN */
  bottom: calc(162rpx + env(safe-area-inset-bottom));
  /* #endif */
}
.full-action{
  /* #ifdef H5 */
  bottom: 64rpx !important;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  bottom: calc(64rpx + env(safe-area-inset-bottom)) !important;
  /* #endif */
}
.fixed-desc {
  position: fixed;
  left: 0;
  /* #ifdef H5 */
  bottom: 100rpx;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  bottom: 0;
  /* #endif */
  .box {
    width: 584rpx;
  }
  .w-584 {
    width: 584rpx;
  }
}
.content-box{
  max-height: 400rpx;
  overflow-y: auto;
}
.hide-tab{
  /* #ifdef MP-WEIXIN */
  bottom: calc(100rpx + env(safe-area-inset-bottom));
  /* #endif */
}
.full-tab{
  /* #ifdef H5 */
  bottom: 0 !important;
  /* #endif */
  /* #ifdef MP-WEIXIN */
  bottom: env(safe-area-inset-bottom) !important;
  /* #endif */
}
</style>
